<template>
    <el-tabs type="border-card">
        <el-tab-pane label="积分活动">
            <div class="bigBox">
                <template v-for="item in list" key="item.id">
                    <div class="contBox">
                        <div class="boxTop">
                            <div class="imgBox">
                                <img :src="item.img">
                            </div>
                            <div class="textBox">
                                {{ item.name }}
                                <p class="tz">{{ item.jieShi }}</p>
                                <p>积分：{{ item.jiFen }}</p>
                            </div>
                            <div>
                                <el-button text @click="dialogVisible = true">设置</el-button>

                                <el-dialog v-model="dialogVisible" title="设置" width="30%" :before-close="handleClose">
                                    <span>每日打卡赠送积分</span><input type="text">
                                    <template #footer>
                                        <span class="dialog-footer">
                                            <el-button @click="dialogVisible = false">取消</el-button>
                                            <el-button type="primary" @click="dialogVisible = false">确认</el-button>
                                        </span>
                                    </template>
                                </el-dialog>
                            </div>

                        </div>

                        <div class="boxBtm">
                            <div>
                                今日<span>{{ item.toDay }}</span>/ 累计 <span>{{ item.allNum }}</span>
                            </div>
                            <template>
                                <el-switch v-model="item.Zuangtai" :active-value="1" :inactive-value="0" inline-prompt
                                    active-text="开" inactive-text="关"></el-switch>
                            </template>
                        </div>

                    </div>
                </template>

            </div>
        </el-tab-pane>
        <el-tab-pane label="积分统计">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="排名" width="180" />
                <el-table-column prop="name" label="姓名" width="180" />
                <el-table-column prop="name" label="手机号" width="180" />
                <el-table-column prop="name" label="积分" width="180" />
                <el-table-column prop="name" label="商城用户" width="180" />
                <el-table-column prop="address" label="活动参与情况" />
                <el-table-column label="活动参与情况">
                    <template v-slot="scope">
                        <el-button @click="xiugai(scope.row)">ceshi</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="1000" />
        </el-tab-pane>
    </el-tabs>




</template>

<script setup lang="ts">
import { ref } from 'vue'

import { ElMessageBox } from 'element-plus'
const beforeChange1 = ref(false)

const list = [
    { id: 1, img: "http://rchqfbdix.hn-bkt.clouddn.com/1111.jpg", name: '每日积分', jieShi: '每天登录即可获得1积分', jiFen: 50, toDay: 50, allNum: 100, Zuangtai: 1 },
    { id: 2, img: "http://rchqfbdix.hn-bkt.clouddn.com/1111.jpg", name: '完成交易', jieShi: '下单成功即可获得2积分', jiFen: 30, toDay: 20, allNum: 200, Zuangtai: 0 },
    { id: 3, img: "http://rchqfbdix.hn-bkt.clouddn.com/1111.jpg", name: '限时福利', jieShi: '下单成功即可获得2积分', jiFen: 60, toDay: 10, allNum: 250, Zuangtai: 1 }
]
const a = (val) => {
}
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
    ElMessageBox.confirm('确认关闭吗？')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
const xiugai = (row) => {
    console.log(row);

}


</script>

<style lang="less">
.bigBox {
    width: 90%;

    margin: 0 auto;

}

.contBox {
    width: 28%;
    height: 25%;
    background-color: rgb(254, 254, 254);
    display: inline-block;
    margin-right: 5%;
    margin-top: 5%;

    &:hover {
        box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    }
}

.boxTop {
    display: flex;
    justify-content: space-between;
    margin: 5% 5% 0 5%;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.imgBox {
    width: 80px;
    height: 80px;

    img {
        width: 80px;
        height: 80px;
    }
}

.textBox {
    display: inline-block;
}

.boxBtm {
    display: flex;
    justify-content: space-between;
    margin: 7% 5% 0 5%;
}

.tz {
    color: rgb(165, 165, 165);
    margin-top: 0px;
    font-size: 12px;
}
</style>